import Map from "ol/Map.js";
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile.js";
import { onMounted, reactive, ref } from "vue";
import { XYZ } from "ol/source";
import { Feature } from "ol";
import Point from "ol/geom/Point.js";
import { Style, Icon, Stroke, Fill, Text, Circle } from "ol/style";
import VectorSource from "ol/source/Vector.js";
import VectorLayer from "ol/layer/Vector.js";
import { fromLonLat, toLonLat, transform } from "ol/proj";
import LineString from "ol/geom/LineString.js";
import Polygon from "ol/geom/Polygon.js";

import $tool from "@/utils/tool";

export default {
  //设置图层样式
  getLayer() {
    return [
      new TileLayer({
        source: new XYZ({
          url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
        }),
      }),
    ];
  },

  /* 
    创建地图
    container 容器
    config    配置
  */
  createMap(container, config) {
    const map = new Map({
      layers: this.getLayer(),
      target: container,
      view: new View(config),
    });
    return map;
  },

  // 创建矢量图层
  createVectorLayer(config) {
    return new VectorLayer(config);
  },

  // 创建矢量源
  createVectorSource(type) {
    switch (type) {
      case "point":
        return new VectorSource();
        break;
      case "line":
        return new VectorSource({
          wrapX: false,
        });
        break;
      default:
        break;
    }
  },
  // 创建Point
  createPoint(item, value = null) {
    const uuid = $tool.createUUID();
    const feature = new Feature({
      type: "point",
      geometry: new Point(fromLonLat(item.points, "EPSG:4326", "EPSG:3857")),
      id: uuid,
      value: value, //存放当前点位信息
    });
    feature.setId(uuid);
    return feature;
  },

  // 创建Line
  createLine(line, value = null) {
    const uuid = $tool.createUUID();
    const projectedCoordinates = line.map((i) =>
      fromLonLat(i, "EPSG:4326", "EPSG:3857")
    );
    const feature = new Feature({
      type: "line",
      geometry: new LineString(projectedCoordinates, "XY"),
      id: uuid,
      value: value,
    });

    feature.setId(uuid);

    return feature;
  },

  // 设置图层样式
  setStyle(event) {
    return new Style(event);
  },

  // 设置图标样式
  setIcon(event) {
    return new Icon(event);
  },

  // 设置直线样式
  setStroke(color, width) {
    return new Stroke({
      color: color,
      width: width,
    });
  },
};
